<script setup lang="ts">
import { getAchievDetail } from "@/api/research/achiev";
import { FileUpload } from "@/components/common/FileUpload";
import { useRouterNavigation } from "@/router/utils";
import arrowLeft from "@iconify-icons/ep/arrow-left";
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
const { go } = useRouterNavigation();
// 富文本
import WangEditor from "@/components/common/WangEditor";
import { isCanPreview } from "@/utils/common";
import ShowAchiev from "@/views/team/research/components/ShowAchiev.vue";
import "@wangeditor/editor/dist/css/style.css";
defineOptions({
  name: "ResearchAchievDetail"
});

// 传值
const props = defineProps({
  dataId: {
    type: Number,
    default: null
  },
  // 是否审核页面
  isApproval: {
    type: Boolean,
    default: false
  }
});

// 加载详情
const loadDetail = async dataId => {
  if (!dataId) {
    return;
  }
  loading.value = true;

  let { data } = await getAchievDetail({ id: dataId });

  teamForm.value = data;
  console.log("teamForm", teamForm.value);
  setTimeout(() => {
    loading.value = false;
  }, 200);
};

// 页面加载
const teamForm = ref<any>({});
const loading = ref(false);
onMounted(async () => {
  const { query } = useRoute();
  let dataId = props.dataId || query.id;
  loadDetail(dataId);
});

watch(
  () => props.dataId,
  async newValue => {
    if (!newValue) {
      return;
    }
    console.log("科研成果详情 watch", newValue);
    loadDetail(newValue);
  },
  { immediate: true }
);
</script>

<template>
  <div
    v-loading="loading"
    class="team-detail"
    :class="{ approval: isApproval }"
  >
    <el-card class="left" shadow="always">
      <div v-if="!isApproval" class="flex items-center mb-6">
        <div>
          <IconifyIconOffline
            :icon="arrowLeft"
            class="mr-2 text-lg cursor-pointer !text-black"
            @click.stop="go(-1)"
          />
        </div>
        <img
          class="mr-2"
          width="30"
          height="30"
          src="@/assets/other/achiev.png"
          alt=""
        />
        <h4 class="mr-2">
          {{ teamForm.scrAchievementsName || "--" }}
        </h4>
        <div>
          <el-tag
            v-if="teamForm.examineStatus === 0"
            type="warning"
            size="small"
            >审核中</el-tag
          >
          <el-tag
            v-else-if="teamForm.examineStatus === 1"
            type="primary"
            size="small"
            >已审核</el-tag
          >
          <el-tag v-else type="danger" size="small">已驳回</el-tag>
        </div>
      </div>
      <el-form ref="formRef" label-width="110px" class="team-form">
        <el-form-item label="团队名称" class="flex-1">
          <div>{{ teamForm?.researchTeam?.teamName || "--" }}</div>
        </el-form-item>
        <div class="flex">
          <el-form-item label="依托单位" class="flex-1">
            <div>{{ teamForm.relyOnUnit || "--" }}</div>
          </el-form-item>
          <el-form-item label="所属学科" class="flex-1">
            <div>{{ teamForm.subject || "--" }}</div>
          </el-form-item>
        </div>
        <div v-if="teamForm.researchTeam" class="flex">
          <el-form-item label="负责人" class="flex-1">
            <div>{{ teamForm.researchTeam.masterUser.name || "--" }}</div>
          </el-form-item>
          <el-form-item label="联系方式" class="flex-1">
            <div>{{ teamForm.researchTeam.masterUser.phone || "--" }}</div>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="所属领域" class="flex-1">
            <div>{{ teamForm.domain || "--" }}</div>
          </el-form-item>
          <el-form-item label="成果类型" class="flex-1">
            <div>{{ teamForm.achievementsType || "--" }}</div>
          </el-form-item>
        </div>
        <el-form-item label="合同附件" class="flex-1">
          <FileUpload
            v-model="teamForm.additionFiles"
            disabled
            :isCanPreview="isCanPreview(teamForm, props.dataId)"
          />
        </el-form-item>
        <el-form-item label="关键词" class="flex-1">
          <div>{{ teamForm.keywords || "--" }}</div>
        </el-form-item>
        <el-form-item label="驳回原因" prop="score">
          <div>{{ teamForm.examineDesc || "--" }}</div>
        </el-form-item>
        <el-form-item label="成果概述" class="!mb-3">
          <WangEditor
            v-model="teamForm.overAchievements"
            disable
            class="w-full"
          />
        </el-form-item>
        <el-form-item label="创新要点" class="!mb-3">
          <WangEditor v-model="teamForm.keyPoints" disable class="w-full" />
        </el-form-item>
        <el-form-item label="成果支撑">
          <WangEditor
            v-model="teamForm.achievementSupport"
            disable
            class="w-full"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 科研成果 -->
    <el-card
      class="right"
      shadow="always"
      body-style="height: 100%;display: flex;flex-direction: column;"
    >
      <ShowAchiev :moduleData="teamForm" />
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 15px;
}
:deep(.tabs .el-tabs__item) {
  padding: 0 18px 0 0 !important;
}
.el-form-item {
  margin-bottom: 5px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 10px;
}
:deep(.team-form .el-form-item__content) {
  font-weight: bold;
}
:deep(.project-form .el-form-item) {
  font-weight: bold;
  margin-bottom: -5px;
}
.team-detail {
  min-width: 1000px;
  display: flex;
  height: calc(100% - 32px);
  box-shadow: none !important;
  .left {
    flex: 5;
    margin-right: 15px;
  }
  .right {
    flex: 5;
    min-width: 500px;
    min-height: calc(100vh - 114px);
  }
}
.team-detail.approval {
  min-width: auto;
  display: block;
  height: auto;
  .left {
    margin: 0 0 12px;
  }
  .right {
    flex: 4;
    height: auto;
  }
}
</style>
